<!DOCTYPE html>
<html  class="x-admin-sm">
<#include "../layout/meta.ftl">
<body class="layui-layout-body" style="background-color: rgb(0, 0, 0) ;color: gainsboro" >
<div class="layui-container" style="margin-top: 15px">
    <div lay-data="${uuid}" id="uuid"></div>
    <div id="container-terminal" style="font-size: 20px;margin-top: 15px"></div>
</div>
<script src="/js/term.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        let element = layui.element;
        let uuid=$("#uuid").attr("lay-data");
        let term = null;
        let url = "ws://" + location.host + "/stream?id=" + uuid;
        socket = new WebSocket(url);
        termOpen();
        function termOpen(){
            socket.onopen = function () {
                term = new Terminal({
                    cols: 200,
                    rows: 40,
                    screenKeys: true,
                    useStyle: true,
                    cursorBlink: true,
                });
                term.open(document.getElementById("container-terminal"));
                term.on('data', function (data) {
                    socket.send(data);
                });
                socket.onmessage = function (data) {
                    term.write(data.data);

                };
                socket.onclose = function () {
                    term.write("Connection closed.");
                    term.close();
                };
            };
        };


    });
</script>
</body>
</html>